import prompt from '@system.prompt';
import mediaLibrary from '@ohos.multimedia.mediaLibrary';
import router from '@system.router';

export default {
    data: {
        graph: {},
        title: "",
        mediaImages: ['pages/images/close.png','pages/images/scale.png'],
        operation: {},
        ctx: null
    },
    onAddImage() {
        this.$element('datedialog').show()
    },
    onReady() {


    },
    canceldialog() {
        prompt.showToast({
            message: 'Event setting canceled.'
        })
    },
    cancelschedule() {
        this.$element('datedialog').close()
    },
    /**
     * 添加测试图片
     */
    onAddTest() {
        // @ts-ignore
        this.initCtx()

        this.$set("graph", {
            w: 120,
            h: 120,
            typeStr: 'image',
            url: 'pages/images/test.jpg',
        })
    },
    takePhoto() {
        this.cancelschedule()
        router.replace({
            uri: 'pages/cameraper/cameraper', // 要跳转的页面uri
        });
    },
    selectPic() {
        this.cancelschedule()
        this.initCtx()
        let option = {
            type: "image",
            count: 1
        };
        mediaLibrary.getMediaLibrary().startMediaSelect(option, (err, value) => {
            let url = '';
            if (value[0] == "[") { //本地预览设置默认值
                url = 'pages/images/bg-tv.jpg'
            } else {
                url = value[0]
            }
            if (err) {
                console.log("An error occurred when selecting media resources.");
                return;
            }
            console.log("Media resources selected.");
            // Obtain the media selection value.
            this.$set("graph", {
                w: 120,
                h: 120,
                typeStr: 'image',
                url: url,
            })

        });

    },


    /**
     * 添加文本
     */
    onAddText() {
        this.initCtx()
        this.$set('graph', {
            typeStr: 'text',
            text: 'helloworld',
        })


    },
    /**
     * 导出图片
     */
    onExport() {
        this.initCtx();
        this.$set('operation', {
            typeStr: "exportImage"
        })


    },
    /**
     * 改变文字颜色
     */
    onChangeColor() {
        this.initCtx()
        this.$set('operation', {
            typeStr: "changeTextColor",
            textColor: '#FF0000FF'
        })
    },

    /**
     * 改变背景颜色
     */
    onChangeBgColor() {
        this.initCtx()
        this.$set('operation', {
            typeStr: "changeBgColor",
            //            bgColor: 'yellow'
            bgColor: '#ffff00'
        })

    },

    /**
     * 改变背景照片
     */
    onChangeBgImage() {
        console.info('----------------onChangeBgImage------------------->');
        this.initCtx();
        this.$set('operation', {
            typeStr: "changeBgImage",
            bgImage: 'pages/images/test.jpg'
        })
    },

    /**
     * 导出当前画布为模板
     */
    onExportJSON() {
        this.initCtx();
        this.$set('operation', {
            typeStr: "exportJSON"
        })

    },

    onImport() {
        this.initCtx();
        // 有背景
        // let temp_theme = [{"type":"bgColor","color":"yellow"},{"type":"image","url":"../../assets/images/test.jpg","y":98.78423143832424,"x":143.78423143832424,"w":104.43153712335152,"h":104.43153712335152,"rotate":-12.58027482265038,"sourceId":null},{"type":"text","text":"helloworld","color":"blue","fontSize":24.875030530031438,"y":242.56248473498428,"x":119.57012176513672,"w":116.73966979980469,"h":34.87503053003144,"rotate":8.873370699754087}];
        // 无背景
        this.$set('operation', {
            typeStr: "importJson",
            tempTheme: [{
                            "typeStr": "image",
                            "url": "pages/images/test.jpg",
                            "y": 103,
                            "x": 91,
                            "w": 120,
                            "h": 120,
                            "rotate": 0,
                            "sourceId": null
                        }, {
                            "typeStr": "text",
                            "text": "helloworld",
                            "color": "#FF0000FF",
                            "fontSize": 20,
                            "y": 243,
                            "x": 97,
                            "rotate": 0
                        }]
        })


    },

    onClearCanvas() {
        console.info('--------------->' + "onClearCanvas()")

        this.initCtx();
        this.$set('operation', {
            typeStr: "clearCanvas"
        })

    },

    //后退
    onUndo() {

        this.$set('operation', {
            typeStr: "undo"
        })


    },
    /**
     * 导出当前画布为模板
     */
    onExportJsonResult(e) {
        console.info('------------------------------导出当前画布为模板-------------------------->' + e.detail)
        console.info(e.detail)
    },
    initCtx() {
        if (this.ctx == null) {
            getApp().data.ctx = this.$element("canvas-drag").getContext('2d')
            this.ctx = getApp().data.ctx
        }

    },
    cutOutPictures(e) {
        console.info('--------------cutOutPictures----------->' + e.detail)
        getApp().data.imageData = e.detail
        router.push({
            uri: 'pages/imagepre/imagepre', // 要跳转的页面uri
            params: {
                transferData: e.detail
            } // 传递的数据，数据个数和名称开发者自己定义
        });


    }
}
